<template>
  <div>
    <n-popover placement="bottom" trigger="click" @update:show="handleUpdateShow">
      <template #trigger>
        <n-popover trigger="hover">
          <template #trigger>
            <span class="emoji-span" :style="{fontSize:props.size+'px'}">{{ props.title }}</span>
          </template>
          表情
        </n-popover>
      </template>

      <div style="max-width: 332px">
        <n-tabs type="segment" animated closable>
          <template v-for="(item, index) in emojis" :key="index">
            <n-tab-pane :name="item.emoji" :tab="item.emoji">
              <n-scrollbar style="max-height: 150px">
                <n-button
                  tertiary
                  style="border-radius: 0px"
                  class="emojiList"
                  v-for="(item2, index2) in item.list"
                  :key="index2"
                  @click="handleEmoji(item2)"
                >
                  {{ item2 }}
                </n-button>
              </n-scrollbar>
            </n-tab-pane>
          </template>
        </n-tabs>
      </div>
    </n-popover>
    <span>{{ myEmoji }}</span>
  </div>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: () => "😀",
  },
  size: {
    type: Number,
    default: () => 15,
  },
});
const emojis = ref([
  {
    emoji: "😂",
    list: [
      "😀",
      "😃",
      "😄",
      "😁",
      "😆",
      "😅",
      "🤣",
      "😂",
      "🙂",
      "🙃",
      "🫠",
      "😉",
      "😊",
      "😇",
      "😕",
      "🫤",
      "😟",
      "🙁",
      "😮",
      "😯",
      "😲",
      "😳",
      "🥺",
      "🥹",
      "😦",
      "😧",
      "😨",
      "😰",
      "😥",
      "😢",
      "😭",
      "😱",
      "😖",
      "😣",
      "😞",
      "😓",
      "😩",
      "😫",
      "🥱",
      "😤",
      "😡",
      "😠",
      "🤬",
      "😈",
    ],
  },
  {
    emoji: "👿",
    list: [
      "👿",
      "💀",
      "☠",
      "💩",
      "🤡",
      "👹",
      "👺",
      "👻",
      "👺",
      "👽",
      "😿",
      "😾",
      "🙈",
      "🙉",
      "🙊",
      "💌",
      "💘",
      "💝",
      "💖",
      "❤️‍🩹",
      "❤️‍🔥",
      "💔",
      "❣",
      "💟",
      "💕",
      "💞",
      "💓",
      "💗",
      "❤",
      "🩷",
      "🧡",
      "💛",
      "💚",
      "💙",
      "🩵",
      "💜",
      "🤎",
      "💦",
      "💫",
      "💥",
      "💢",
      "💯",
      "💋",
      "🤍",
      "🩶",
      "🖤",
    ],
  },
  {
    emoji: "👋",
    list: [
      "👋",
      "🤚",
      "🖐",
      "✋",
      "🖖",
      "🫱",
      "🫲",
      "🫳",
      "🫴",
      "🧑‍🏫",
      "👩‍🎓",
      "👨‍🎓",
      "🧑‍🎓",
      "👩‍⚕️",
      "👨‍⚕️",
      "🧑‍⚕️",
      "🫸",
      "🫷",
      "👨‍🏫",
      "👩‍🏫",
      "🧑‍⚖️",
      "👨‍⚖️",
      "👩‍⚖️",
      "🧑‍🌾",
      "👨‍🌾",
      "👩‍🌾",
      "🧑‍🍳",
      "🧑‍💼",
      "👩‍🏭",
      "👨‍🏭",
      "👩‍🏭",
      "🧑‍🏭",
      "👩‍🔧",
      "👨‍🔧",
      "🧑‍🔧",
      "👩‍🍳",
      "👨‍🍳",
      "💏",
      "👩‍❤️‍💋‍👨",
      "👨‍❤️‍💋‍👨",
      "👩‍❤️‍💋‍👩",
      "💑",
      "👩‍❤️‍👨",
      "👨‍❤️‍👨",
      "👩‍❤️‍👩",
      "👨‍👩‍👦",
      "👌",
      "🤌",
      "🤏",
      "✌",
      "🤞",
      "🫰",
      "🤟",
      "🤘",
      "🤙",
      "👈",
      "👉",
      "👊",
      "✊",
      "👎",
      "👍",
      "🫵",
      "☝",
      "👇",
      "🖕",
      "👆",
      "🤛",
      "🤜",
      "👏",
      "🙌",
      "🫶",
      "👐",
      "🤲",
      "🤝",
      "🙏",
    ],
  },
  {
    emoji: "🌍",
    list: [
      "🌍",
      "🌐",
      "🗺",
      "🌚",
      "🌝",
      "🌞",
      "⛅",
      "☁",
      "⛈",
      "🌤",
      "🌟",
      "🌥",
      "🌦",
      "🌧",
      "🌨",
      "🌩",
      "🌪",
      "🌬",
      "❄",
      "☃",
      "🛫",
      "🛬",
      "✈",
      "🚢",
      "🚀",
      "🚲",
      "🚐",
      "🚉",
      "🚏",
      "🛣",
      "🚨",
      "🚧",
      "☄",
      "🔥",
      "💧",
      "🌊",
      "🗻",
    ],
  },
]);
const myEmoji = ref();
const emit = defineEmits(["getEmoji"]);

const handleEmoji = (item) => {
  // if (myEmoji.value == null) myEmoji.value = item;
  // else myEmoji.value += item;
  // console.log(item);
  emit("getEmoji", item);
};
</script>

<style lang="scss" scoped>
.emoji-span {
  cursor: pointer;
  transform: scale(11);
}
</style>
